<template>
    <div class="mainBox" draggable="true" @dragstart="dragData"  @drop="dropChangeColor" @dragover="dragOver" >
        <a-color-picker  v-model="color" showPreset :disabled-alpha="true">
            <div class="color-block" :style="{backgroundColor: color}" > </div>
        </a-color-picker>
        <div class="infoBox">
            {{ color }}
        </div>
        <div class="actionBox">
            <div class="iconBtn" @click="copy(color)">
                <Icon size="20">
                    <Copy16Filled />
                </Icon>
            </div>
            <div class="iconBtn" @click="deleteColor">
                <Icon size="20">
                    <Delete16Filled />
                </Icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, defineEmits } from 'vue';
import { Icon } from '@vicons/utils'
import {Copy16Filled, Delete16Filled} from '@vicons/fluent';
import { copy } from '../api.ts'
const color = ref('');
// 以当前ms时间戳为id
const id = new Date().getTime().toString();

const prop = defineProps({
    modelValue: {
        type: String,
        default: '#88ff88'
    }
});

const emit = defineEmits(['update:modelValue', 'delete']);

watch(() => color.value, (newValue) => {
    emit('update:modelValue', newValue);
});
watch(() => prop.modelValue, (newValue) => {
    color.value = newValue;
});

const deleteColor = () => {
    emit('delete');
};

color.value = prop.modelValue;

const dragData = (e: DragEvent) => {
    e.dataTransfer?.setData('color', color.value);
    e.dataTransfer?.setData('id', id);
};

const dragOver = (e: DragEvent) => {
    e.preventDefault();

};


const dropChangeColor = (e: DragEvent) => {
    e.preventDefault();
    const c = e.dataTransfer?.getData('color');
    if(c){
        color.value = c;
    }
};

</script>

<style scoped>
.mainBox{
    width: 64px;
    height: 64px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
}
.color-block{
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
.infoBox{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.18);
    color: rgb(224, 224, 224);
    height: 20px;
    font-size: 13px;
    line-height: 20px;
}
.actionBox{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.18);
}
.mainBox:hover .actionBox {
    display: flex;
}

.mainBox:hover .infoBox {
    display: none;
}

.actionBox {
    display: none;
}
.iconBtn{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: rgb(187, 187, 187);
    background-color: rgba(0, 0, 0, 0);
}
.iconBtn:hover{
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.318);
}
.iconBtn:active{
    color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.518);
}
.iconGrab{
    cursor: grab !important;
}

</style>